<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>事件处理的方案选择(Selection of Event Handling Solutions)</title>
  <!-- 
  在JavaScript中，事件处理是实现用户交互的重要部分。选择合适的事件处理解决方案可以提高代码的可维护性和性能。
  一、事件处理的基本概念
  - 事件：用户与网页交互的行为，如点击、键盘输入、鼠标移动等。
  - 事件处理：指响应这些事件的代码，通常是一个函数。

  二、选择事件处理解决方案的考虑因素
  1. 事件类型：
    - 根据需要处理的事件类型选择合适的事件处理方案。例如，点击事件、输入事件、滚动事件等。
  2. 事件绑定方式：
    - 直接绑定：通过 HTML 属性直接在标签中绑定事件处理函数，例如  `<button onclick="handleClick()">点击</button>` 。
    - 使用 JavaScript 绑定：通过 JavaScript 代码使用  `addEventListener()`  方法绑定事件，通常更灵活和可维护。
    const button = document.getElementById('myButton');
    button.addEventListener('click', handleClick);
  3. 事件委托：
    - 事件委托是将事件处理程序绑定到父元素，而不是每个子元素上。这种方式可以减少内存使用，提高性能，尤其是在处理动态生成的元素时。
    const parent = document.getElementById('parent');
    parent.addEventListener('click', function(event) {
      if (event.target.matches('.child')) {
        handleChildClick(event.target);
      }
    });
  4. 事件的移除：
    - 选择事件处理方案时，考虑如何移除事件处理程序。使用  `removeEventListener()`  方法可以方便地移除绑定的事件处理程序。
    function handleClick() {
      console.log('按钮被点击');
    }
    button.addEventListener('click', handleClick);
    // 需要时移除事件处理程序
    button.removeEventListener('click', handleClick);
  三、性能考虑
  1. 避免内存泄漏：
    - 确保在不再需要事件处理程序时移除它们，尤其是在使用动态元素时，以避免内存泄漏。

  2. 节流和防抖：
    - 对于高频率触发的事件（如滚动、窗口调整大小等），可以使用节流（throttling）和防抖（debouncing）技术来提高性能。
     示例（防抖）：
    function debounce(func, delay) {
      let timeout;
      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
      };
    }

    window.addEventListener('resize', debounce(() => {
      console.log('窗口调整大小');
    }, 300));

  四、总结
  - 选择合适的事件处理方案需要考虑事件类型、绑定方式、事件委托、事件移除和性能等因素。
  - 使用  `addEventListener()`  方法绑定事件通常更灵活，事件委托可以提高性能，节流和防抖技术可以优化高频事件的处理。
  - 了解这些事件处理解决方案有助于开发更高效、可维护的用户交互功能。 

   -->
</head>
<body>

  <h3>1.在html中编写onclick的javascript代码</h3>
  <button onclick="handleClick()">点击我</button>

  <h3>2.通过获取元素对象</h3>
  <button class="btn1">按钮1</button>
  <button class="btn2">按钮2</button>

  <script>
    // 1.在html中编写onclick的javascript代码
    function handleClick() {
      console.log('按钮被点击');
    }

    // 2.通过获取元素对象
    const btn1 = document.querySelector('.btn1');
    btn1.onclick = function () {
      console.log('按钮1被点击');
    }

    const btn2 = document.querySelector('.btn2');
    btn2.addEventListener('click', function () {
      console.log('按钮2被点击');
    })

  </script>
  </script>

  
</body>
</html>